<template>
  <div class="container">
    <div class="header">
      <!-- 通过v-show 动态显示文字信息和长宽 -->
      <div class="brand" :class="collapsed_class" v-show="collapsed == false">
        <h2 class="headline">校园无诈后台管理系统</h2>
      </div>
      <div class="brand_mini" v-show="collapsed == true">
        <h2 class="headline_mini">FPCMS</h2>
      </div>

      <!-- 个人头像 以及下拉菜单部分 -->
      <div class="dropdown">
        <!-- 消息提示 小图标部分 -->
        <div class="message_remind">
          <i
            class="iconfont icon-drxx67"
            style="font-size: 20px; color: #66b1ff"
          ></i>
        </div>
        <a-dropdown :trigger="['click']">
          <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
            <a-avatar
              :size="30"
              :src="avatarUrl"
              style="margin-top: -10px; border-radius: 50%"
            />
            <span class="cutOverLongWord"> {{ record.name }}</span>
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item key="0" overlayClassName="aaa">
              <a href="#" @click="my_detail_message">个人信息</a>
            </a-menu-item>
            <a-menu-item key="1" overlayClassName="aaa">
              <a href="#" @click="modify_password">修改密码</a>
            </a-menu-item>
            <a-menu-item key="2" overlayClassName="aaa" v-if="perms_is_teacher">
              <a href="#" @click="teacherManager">教师管理</a>
            </a-menu-item>
            <a-menu-item key="3" overlayClassName="aaa" @click="loginout">
              <a href="#">退出登录</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
    <div class="main">
      <div :class="collapsed_class_sidebar">
        <div style="width: 230px">
          <a-button
            class="CollapseBtn"
            type="primary"
            style="margin-bottom: 16px"
            @click="toggleCollapsed"
          >
            <!-- <a-icon type="unordered-list" /> -->
            <a-icon
              :style="{ fontSize: '20px', color: '#ccc' }"
              type="unordered-list"
            />
          </a-button>
          <a-menu
            click="ToRouter"
            :default-selected-keys="['1']"
            :default-open-keys="['sub1']"
            mode="inline"
            theme="light"
            :inline-collapsed="collapsed"
          >
            <a-menu-item key="1">
              <a-icon type="pie-chart" />
              <span>首页</span>
              <router-link :to="{ path: '/welcome' }" />
            </a-menu-item>

            <a-sub-menu
              key="sub1"
              v-if="
                isAuth(['ROOT', 'USER:SELECT']) ||
                isAuth(['ROOT', 'ROLE:SELECT'])
              "
            >
              <span slot="title"
                ><a-icon type="mail" /><span>权限管理</span></span
              >
              <a-menu-item key="5" v-if="isAuth(['ROOT', 'USER:SELECT'])">
                <span>用户管理</span>
                <router-link :to="{ path: '/user' }" />
              </a-menu-item>
              <a-menu-item key="6" v-if="isAuth(['ROOT', 'ROLE:SELECT'])">
                <span>角色管理</span>
                <router-link :to="{ path: '/role' }" />
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu
              key="sub3"
              v-if="
                isAuth(['ROOT', 'SCHOOL:SELECT']) ||
                isAuth(['ROOT', 'DEPT:SELECT']) ||
                isAuth(['ROOT', 'CLASS:SELECT'])
              "
            >
              <span slot="title"
                ><a-icon type="user-add" /><span>组织管理</span></span
              >
              <a-menu-item key="8" v-if="isAuth(['ROOT', 'SCHOOL:SELECT'])">
                <span>学校管理</span>
                <router-link :to="{ path: '/school' }" />
              </a-menu-item>
              <a-menu-item key="9" v-if="isAuth(['ROOT', 'DEPT:SELECT'])">
                <span>系部管理</span>
                <router-link :to="{ path: '/department' }" />
              </a-menu-item>
              <a-menu-item key="10" v-if="isAuth(['ROOT', 'CLASS:SELECT'])">
                <span>班级管理</span>
                <router-link :to="{ path: '/class' }" />
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu
              key="sub2"
              v-if="
                isAuth(['ROOT', 'QUESTION:SELECT']) ||
                isAuth(['ROOT', 'EXAM:SELECT'])
              "
            >
              <span slot="title"
                ><a-icon type="appstore" /><span>题库管理</span></span
              >
              <a-menu-item key="12" v-if="isAuth(['ROOT', 'QUESTION:SELECT'])">
                <span>题库类型</span>
                <router-link :to="{ path: '/questionsType' }" />
              </a-menu-item>
              <a-menu-item key="13" v-if="isAuth(['ROOT', 'QUESTION:SELECT'])">
                <span>题库数据</span>
                <router-link :to="{ path: '/questionsDetail' }" />
              </a-menu-item>
              <a-menu-item key="14" v-if="isAuth(['ROOT', 'EXAM:SELECT'])">
                <span>题库组卷</span>
                <router-link :to="{ path: '/exams' }" />
              </a-menu-item>
            </a-sub-menu>

            <a-sub-menu key="sub4">
              <span slot="title"
                ><a-icon type="flag" /><span>活动安排</span></span
              >
              <a-menu-item key="15" v-if="isAuth(['ROOT', 'ACTIVITY:SELECT'])">
                <span>活动管理</span>
                <router-link :to="{ path: '/active' }" />
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </div>
      </div>
      <!-- 灰黑色的包裹层
       -->
      <div class="surround">
        <router-view @showCurrentAvatar="getAvatar" />
      </div>
    </div>
    <modify-password
      v-if="modifyPasswordVisible"
      ref="modifyPassword"
    ></modify-password>
  </div>
</template>
<script>
import modifyPassword from "../components/home_modify_password.vue";
export default {
  components: {
    modifyPassword,
  },
  data() {
    return {
      record: "",
      id: "",
      avatarUrl: "",
      // 对于修改密码弹窗的显示与隐藏
      modifyPasswordVisible: false,
      collapsed: false,
      // perms
      perms_is_teacher: false,
      // 对于顶部区块的拉伸
      collapsed_class: {
        brand: true,
        brand_mini: false,
        headline: true,
        headline_mini: false,
      },
      //对于左侧菜单栏的拉伸
      collapsed_class_sidebar: {
        sidebar: true,
        sidebar_mini: false,
      },
    };
  },
  created() {
    this.getAvatar();
  },
  mounted() {
    //当跳转回 该页面后 重新刷新头像信息
    this.getAvatar();
  },
  methods: {
    // 获取home页面的头像信息
    async getAvatar() {
      const { data: res } = await this.$http.get("/admin/currentuser");
      if (res.code == 200) {
        this.avatarUrl = res.data.avatarUrl;
        this.id = res.data.id;
        this.record = res.data;

        res.data.perms.forEach((item) => {
          if (item.includes("TEACHER")) {
            this.perms_is_teacher = true;
          }
        });
      }
    },

    modify_password() {
      this.modifyPasswordVisible = true;
      this.$nextTick(() => {
        this.$refs.modifyPassword.init();
        // 清空表单 发送请求 获取表单项的部分选择数据.
      });
    },
    my_detail_message() {
      // this =that 一定要有 一定要跳转 必要时可以打印route 来判断那里出了问题
      let that = this;
      let id = that.id;
      that.$router.push({
        name: "userMessage",
        params: { id },
      });
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
      // 标题的伸缩框
      this.collapsed_class.brand = !this.collapsed_class.brand;
      this.collapsed_class.brand_mini = !this.collapsed_class.brand_mini;
      this.collapsed_class.headline = !this.collapsed_class.headline;
      this.collapsed_class.headline_mini = !this.collapsed_class.headline_mini;
      // 左菜单栏的伸缩
      this.collapsed_class_sidebar.sidebar =
        !this.collapsed_class_sidebar.sidebar;
      this.collapsed_class_sidebar.sidebar_mini =
        !this.collapsed_class_sidebar.sidebar_mini;
    },
    async loginout() {
      const { data: res } = await this.$http.get("/admin/logout");
      if (res.code == 200) {
        // this.$message.success("退出登录成功");
        this.common.notify("success", "退出登录成功");
        // 清空token
        window.localStorage.setItem("authorization", "");
        // 退出
        this.$router.push({
          name: "Login",
        });
      } else {
      }
    },
    // 跳转到教师操作的模块
    teacherManager() {
      let record = this.record;
      this.$router.push({
        name: "teacherManager",
        params: { record },
      });
    },
  },
};
</script>
<style  lang='less' scoped>
@import "../assets/css/home.less";
/deep/ .ant-dropdown-menu-item > a,
.ant-dropdown-menu-submenu-title > a {
  width: 100px !important;
  text-align: center !important;
  margin: 0;
}

.ant-dropdown {
  top: 60px !important;
}
</style>